<template>
  <view clas="search">
    <!-- 搜索 -->
    <u-sticky>
      <view class="search-box">
        <u-search placeholder="搜索" v-model="params.key" shape="square"  :show-action="false" @search="searchHandle"></u-search>
      </view>
    </u-sticky>
    <view class="tab-list">
      <!--商品列表-->
      <goods-list :list_data="goodsData" @listTap="goodsListTap" />
    </view>
  </view>
</template>

<script>
import GoodsList from "../../components/common/goods-list";
import {getGoods} from "../../common/http";

export default {
  components:{
    GoodsList,
  },
  data() {
    return {
      nomore: true, // 锁定数据加载
      params:{
        page: 0,//第几页
        pageSize:10, //获取几条。
        key: '', //模糊搜素
        mold_id:'',
        brand_id:'',
      },
      goodsData:[],
    };
  },
  onLoad(option) {
    if(option.mold_id){
      this.params.mold_id = option.mold_id
    }
    if(option.brand_id){
      this.params.brand_id = option.brand_id
      this.init()
    }
    if(option.name) {
      uni.setNavigationBarTitle({
        title: option.name
      })
    }
  },
  /* 触底事件 */
  onReachBottom() {
    // 有数据 加载
    if (this.nomore) {
      this.addReach();
    }

  },
  methods:{
    searchHandle(){
      if(!this.params.key){
        uni.showToast({
          title: '搜索内容不能为空',
          duration: 2000
        });
        return
      }
      // 重新搜索 重置
      this.params.page = 0
      this.params.pageSize = 10
      // 清空数组
      this.goodsData = []
      this.init()
    },
    init(){
      getGoods(this.params).then((res)=>{
        if(res.data.code == 0){
          if(this.goodsData.length >= res.data.data.count) {
            // 锁定 没有更多数据
            this.nomore = false
          }
          this.goodsData = res.data.data.goodsList
        }
      })
    },
    addReach() {
      this.params.page++
      getGoods(this.params).then((res)=>{
        if(res.data.code == 0){
          if(this.goodsData.length >= res.data.data.count) {
            // 锁定 没有更多数据
            this.nomore = false
          }else{
            this.goodsData = this.goodsData.concat(res.data.data.goodsList)
          }
        }
      })
    },
    goodsListTap(e) {
      uni.navigateTo({
        url: '/sub_pages/detail/detail?id='+e.data.id + '&type='+e.data.type
      });
    },
  }
}
</script>

<style lang="scss">
.search-box{
  background-color: #fff;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-top: calc(var(--status-bar-height) + 140rpx);
}
.search-list .use-load{
  margin-bottom: 20rpx;

}
.u-load-more-wrap, .u-line-1{
  background-color: #fff !important;
}
.tab-list {
  position: relative;
  width: 100%;
}
</style>